// 获取操作对象
var lists = document.querySelector('.sptvl ul');
// var uls = document.querySelector('ul')
var pag1 = document.querySelector('.pagination');
// 通过ajax获取数据库的条数
var num = 0;

(async function() {
    // 获取所有数据
    var txt = await PromiseAjax({
        url: './php/list.php'
    })
    // console.log(txt);
    // 把字符串转为数组对象,并获取该数组的长度
    num = eval('('+txt+')').length
    // 创建分页器的参数对象
    var o1 = {
        pageInto:{
            pagenum:1,
            pagesize:20,
            totalsize:num,
            totalpage:Math.ceil(num/20)
        },
        // 文本信息
        textInfo: {
            first: '首页',
            previous: '上一页',
            next: '下一页',
            last: '尾页'
        }
    }
    // 创建分页器的实例化对象
    new Pagination(pag1,o1,(m)=>{
        //通过页面，获取当前页面所对应的数据
        ajax2({
            url:'./php/list2.php',
            data:'num='+m,
            success(dt) {
                // 把字符串转为数组
                var ar1 = eval('('+dt+')')
                // console.log(ar1);
                // 创建字符串，拼接所有内容
                var str = ''
                // 遍历数组元素
                ar1.forEach(item=>{
                    str+= `
                        <li>
                            <a href="./details.html?id=${item.id}">
                                <img src="${item.img}" alt="">
                            </a>
                            <p class="p1">
                                <span class="sp1"><span class="sp2">￥</span>${item.price}</span>
                                <span class="sp2" style="color: #666;">￥</span>
                                <span class="sp3">${item.mlpri}</span>
                            </p>
                            <p class="p2">
                                <a href="javascript:;">${item.title}</a>
                            </p>
                            <p class="p3">
                                <a href="javascript:;">
                                    <i class="iconfont icon-ziying ie"></i>
                                </a>
                                <a href="javascript:;">
                                    <i class="iconfont icon-huodaofukuan iu"></i>
                                </a>
                            </p>
                        </li>
                    `
                })
                // 把拼接好的内容渲染到页面 
                lists.innerHTML=str
            }
        })

    })

})()